<template>
	<view class="content">
		<view class="rg_ico">
			<image src="../../static/imgs/head02.jpg" />
		</view>
		<form @submit="forget_submit">
			<input type="text" name="phone" @blur="setPhone" placeholder="请输入手机号">
			<!-- <input type="text" placeholder="请输入验证码"> -->
			<input type="password" name="password" placeholder="请输入密码">
			<input type="password" name="againPwd" placeholder="请再次确认密码">
			<input type="text" name="Codes" placeholder="验证码" id="form-code" class=" lastInput">
			<button class="but1" @click="getCode" :disabled="codeDisabled">{{codeMsg}}</button>
			<!-- <input type="text" placeholder="请输入邀请码"> -->
			<!-- 图片/验证码 -->
			<!-- <button></button> -->
			<!-- <div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode">
			      <span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</span>
			    </div> -->
			<button form-type="submit" class="btn">提交</button>
		</form>
	</view>
</template>

<script>
	import {
		FORGET,
		forgetEMAIL
	} from '../../constants/index.js'



	export default {

		data() {
			return {
				// 是否禁用按钮
				codeDisabled: false,
				// 倒计时秒数
				countdown: 60,
				// 按钮上的文字
				codeMsg: '获取邮箱验证码',
				// 定时器
				timer: null,

				phone: '',
			}
		},

		methods: {

			setPhone(e) {
				this.phone = e.detail.value;
			},

			getValidStr() {
				if (this.countdown > 0 && this.countdown <= 60) {
					this.countdown--;
					if (this.countdown !== 0) {
						this.codeMsg = "重新发送(" + this.countdown + ")";
					} else {
						clearInterval(this.timer);
						this.codeMsg = "获取邮箱验证码";
						this.countdown = 60;
						this.timer = null;
						this.codeDisabled = false;
					}
				}
			},
			// 获取验证码
			getCode() {
				// 手机号格式
				var re = /^1[1356789]\d{9}$/;
				let str = this.phone;
				if (!re.test(str)) {
					return uni.showToast({
						title: '请确认电话格式！',
					});
				}
				this.$request.post(forgetEMAIL, {phone:this.phone}).then(res => {
					console.log(res)
					if (res != 1) {
						return uni.showToast({
							title: '请检查电话号码是否注册！'
						})
					}
					// 验证码60秒倒计时
					if (!this.timer) {
						this.getValidStr();
						this.codeDisabled = true;
						this.timer = setInterval(this.getValidStr, 1000)
					}
					if (res == 1) {
						return uni.showToast({
							title: "邮箱验证码发送成功，请注意查看邮件",
						});
					}
					return uni.showToast({
						title: "邮箱验证码发送失败，请注意邮箱格式",
					});
				})
				
			},

			// 校验
			forget_submit(e) {
				let data = e.detail.value;
				// 手机号格式
				var re = /^1[1356789]\d{9}$/;
				let str = data.phone;
				if (!re.test(str)) {
					return uni.showToast({
						title: '请确认电话格式！',
					});
				}

				// if(data.phone.length!=11){
				// 	return uni.showToast({
				// 		title:'请输入正确手机号格式！'
				// 	});
				// }
				if (data.password.length < 6) {
					return uni.showToast({
						title: '密码不能少于6位！'
					});
				}
				if (data.password != data.againPwd) {
					return uni.showToast({
						title: '两次密码不一致！'
					});
				}
				if (data.Codes == "") {
					return uni.showToast({
						title: '验证码不能为空！'
					});
				}
				// 前台发送请求给后台
				this.$request.post(FORGET, data).then(res => {
					if (res == 0) {
						return uni.showToast({
							title: "验证码错误，提交失败！",
						});
					} else if (res == 1) {
						// 成功
						uni.showToast({
							title: "恭喜，提交成功！",
						});
					}
					// 跳转页面
					setTimeout(function(){
						uni.reLaunch({
							url: '../login'
						})
					},2000)
				})
				
			},

			// refreshCode: function() {
			// 	this.isDisable = true
			// 	setTimeout(() => {
			// 		this.isDisable = false //点击一次时隔60秒后才能再次点击
			// 	}, 3000)
			// 	let data = e.detail.value;
			// 	// 手机号格式
			// 	var re = /^1[1356789]\d{9}$/;
			// 	let str = data.phone;
			// 	if (!re.test(str)) {
			// 		return uni.showToast({
			// 			title: '请确认电话格式！',
			// 		});
			// 	}
			// 	this.$request.post(forgetEMAIL, data.phone).then(res => {
			// 		console.log(res)
			// 		if(res != 1){
			// 			return uni.showToast({
			// 				title:'请检查电话号码是否注册！'
			// 			})
			// 		}
			// 		if (res == 1) {
			// 			return uni.showToast({
			// 				title: "邮箱验证码发送成功，请注意查看邮件",
			// 			});
			// 		}
			// 		return uni.showToast({
			// 			title: "邮箱验证码发送失败，请注意邮箱格式",
			// 		});
			// 	})
			// }
		}
	}
</script>

<style>
	.but1 {
		width: 54%;
	}

	.lastInput {
		width: 23%;
		display: inline-block;
		float: left;
	}

	.content {
		padding: 0 50rpx;
	}

	.rg_ico {
		padding-top: 25rpx;
		text-align: center;
	}

	.rg_ico image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
	}



	input {
		margin-top: 40rpx;
		padding-left: 20rpx;
		font-size: 13px;
		border-radius: 20rpx;
		height: 80rpx;
		border: 1px #C0C0C0 solid;
	}

	button {
		margin-top: 40rpx;
		border-radius: 40rpx;
		background: rgb(247, 149, 184);
		color: white;
		height: 88rpx;
		font-size: 15px;
	}
</style>
